<template>
  <div class="login">
    <div class="box">
      <p>签名墙管理系统</p>
      <el-form label-width="100px" class="login_form">
        <el-form-item label="用户名">
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password"></el-input>
        </el-form-item>
        <el-form-item class="button">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { GetLogin } from "../api/index";
export default {
  data() {
    return {
      username: "",
      password: "",
      // admin 123456
    };
  },
  methods: {
    submitForm() {
      GetLogin({
        userName: this.username,
        password: this.password,
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success("登录成功");
          localStorage.setItem("token", res.data.msg);
          return this.$router.push("/home");
        } else {
          this.$message.error("账号或者密码错误");
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  background-color: #2b4b6b;
  height: 100%;
}
.box {
  /* background-color: aliceblue; */
  width: 450px;
  height: 300px;
  position: absolute;
  left: 36.5%;
  top: 30%;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.el-button {
  width: 155px;
}
p {
  text-align: center;
  color: aliceblue;
  font-size: 20px;
  margin-left: 100px;
}
.choose {
  margin-left: 40px;
}
.el-button {
  width: 310px;
}
</style>